<template>
	<view class="recommendContainer">
		<!-- 轮播图 -->
		<swiper class="banner" :indicator-dots="true" :autoplay="true"  :interval="3000" :duration="1000">
			<swiper-item><image src="https://yanxuan.nosdn.127.net/741c22d37033bacab7ebb8a23f35acf8.jpg"></image></swiper-item>
			<swiper-item><image src="https://yanxuan.nosdn.127.net/a69b74f8c05e586496c4979f9cb2c9ff.jpeg"></image></swiper-item>
		</swiper>
		<!-- 政策信息 -->
		<view class="policyDescList">
			<view class="policyDescItem" v-for="(policyDescItem,index) in policyDescList" :key="index">
				<image :src="policyDescItem.icon"></image>
				<text>{{policyDescItem.desc}}</text>
			</view>
		</view>
		<!-- 导航菜单 -->
		<view class="kingKongModule">
			<view class="kingKongItem" v-for="(kingKongItem,index) in kingKongList" :key="kingKongItem.L1Id">
				<image :src="kingKongItem.picUrl"></image>
				<text>{{kingKongItem.text}}</text>
			</view>
		</view>
		<!-- 大图和滑块 -->
		<category/>
	</view>
</template>

<script>
import category from '../../components/category/category.vue'
//引入vuex辅助函数
import {mapGetters} from 'vuex'
	export default{
		name:'recommend',
		components:{
			category
		},
		computed:{
			...mapGetters(['policyDescList','kingKongList'])
		}
	}
	
</script>

<style lang="stylus">
.recommendContainer
	.banner
		width 100%
		height 350upx
		image 
			width 100%
			height 100%
	.policyDescList
		display flex
		.policyDescItem
			flex 1
			text-align center
			image 
				width 32upx
				height 32upx
				vertical-align middle
			text
				font-size 24upx
				vertical-align middle
	.kingKongModule
		display flex
		flex-wrap wrap
		margin 20upx 0
		.kingKongItem
			width 20%
			display flex
			flex-direction column
			align-items center
			image 
				width 110upx
				height 110upx
		 text
				font-size 26upx
				line-height 30upx
			
</style>
